<template>
  <div style="overflow-y:auto;overflow-x:hidden;">
    <el-form :ref="submitFormRef" class="submit-form" :model="ruleForm" :rules="rules"
             :label-width="labelWidth"
             :label-position="labelPosition">
      <el-row :gutter="10">
        <el-col v-for="item in formList" :key="(item.prop + item.name)" :span="item.colSpan || 24">
          <el-form-item v-if="item.slot" :style="formStyle" :rules="item.rules" :prop="item.prop" :label="item.label">
            <slot :name="item.prop" />
          </el-form-item>
          <template v-else>
            <el-divider v-if="item.name === 'title'" content-position="left">{{ item.label }}</el-divider>
            <el-form-item :style="formStyle" :rules="item.rules" v-else-if="(item.name !== 'title') && (item.show ? item.show() : true)" :prop="item.prop" :label="item.label">
              <el-select
                  :filterable="item.filterable"
                  :style="{ width: item.width || '240px'}"
                  :placeholder="item.placeholder" v-if="item.name === 'select'" v-model="ruleForm[item.prop]" :disabled="disabled || formatDisabled(item.disabled)" :multiple="item.multiple" clearable @change="(val) => defaultChange(item.prop, val)">
                <el-option
                    v-for="optionItem in item.options"
                    :key="optionItem.value"
                    :value="optionItem.value"
                    :label="optionItem.label"
                />
              </el-select>
              <el-select-tree
                  v-else-if="item.name === 'selectTree'"
                  v-model="ruleForm[item.prop]"
                  :disabled="disabled || formatDisabled(item.disabled)"
                  :multiple="item.multiple"
                  clearable
                  default-expand-all
                  :check-strictly="item.checkStrictly"
                  :node-key="item.nodeKey || 'id'"
                  :props="item.props"
                  :data="item.options"
                  @change="(val) => defaultChange(item.prop, val)"
              />
              <el-radio-group v-else-if="item.name === 'radio'" v-model="ruleForm[item.prop]" :disabled="disabled || formatDisabled(item.disabled)" clearable @change="(val) => defaultChange(item.prop, val)">
                <el-radio
                    v-for="optionItem in item.options"
                    :key="optionItem.value"
                    :label="optionItem.value"
                >{{ optionItem.label }}</el-radio>
              </el-radio-group>
              <el-checkbox-group v-else-if="item.name === 'checkbox'" v-model="ruleForm[item.prop]" :disabled="disabled || formatDisabled(item.disabled)" clearable @change="(val) => defaultChange(item.prop, val)">
                <el-checkbox
                    v-for="optionItem in item.options"
                    :key="optionItem.value"
                    :label="optionItem.value"
                >{{ optionItem.label }}</el-checkbox>
              </el-checkbox-group>
              <el-switch v-else-if="item.name === 'switch'" v-model="ruleForm[item.prop]" :disabled="disabled || formatDisabled(item.disabled)" :active-value="item.activeValue" :inactive-value="item.inactiveValue" :active-text="item.activeText" :inactive-text="item.inactiveText" @change="(val) => defaultChange(item.prop, val)" />

              <el-input-number
                  :style="{ width: item.width || '120px'}"
                  v-else-if="item.name === 'number'"
                  :controls-position="item.position || 'right'"
                  v-model="ruleForm[item.prop]"
                  :step="item.step || 1"
                  :min="item.min || 0"
                  :precision="item.precision"
                  :disabled="disabled || formatDisabled(item.disabled)"
                  @change="(val) => defaultChange(item.prop, val)" >
                <template v-if="item.append" v-slot:append>
                  {{ item.append }}
                </template>
              </el-input-number>

              <el-date-picker
                  v-else-if="item.name === 'datetime'"
                  v-model="ruleForm[item.prop]"
                  :disabled="disabled || formatDisabled(item.disabled)"
                  :type="item.dateType"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                  @change="(val) => defaultChange(item.prop, val)"
              />
              <template v-else-if="item.name === 'file'" >
                <UploadFile v-model="ruleForm[item.prop]" :multiple="item.multiple" />
              </template>
              <UploadVideo v-else-if="item.name === 'file_video'" v-model="ruleForm[item.prop]" :multiple="item.multiple" />
              <RichEditor v-else-if="item.name === 'rich'" v-model="ruleForm[item.prop]" />
              <el-input
                  v-else
                  v-model="ruleForm[item.prop]"
                  :style="{ width: item.width || '240px'}"
                  :min="item.mim || 0" :max="item.max"
                  :disabled="disabled || formatDisabled(item.disabled)"
                  :rows="item.rows || 5" placeholder="请输入"
                  :type="item.type || 'text'"
                  :placeholder="item.placeholder"
                  :show-password="item.showPassword || false"
                  @change="(val) => defaultChange(item.prop, val)" >
                <template v-if="item.prepend" v-slot:prepend>
                  {{ item.prepend }}
                </template>
              <template v-if="item.append" v-slot:append>
                {{ item.append }}
              </template>
                <template v-if="item.suffix" v-slot:suffix>
                  {{ item.suffix }}
                </template>
                <template v-if="item.prefix" v-slot:prefix>
                  {{ item.prefix }}
                </template>
              </el-input>
            </el-form-item>
          </template>
        </el-col>
        <slot />
      </el-row>
    </el-form>
    <slot name="footer" v-if="footer">
      <div
          :style="{
            ...formStyle,
            textAlign: 'right',
            width: '100%',
            paddingBottom: '20px',
            marginTop: '10px',
          }">
        <el-button v-if="showClose" @click="onClose">{{ cancelText }}</el-button>
        <el-button :loading="loading" :disabled="loading" type="primary" @click="onSave">提交</el-button>
      </div>
    </slot>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
import UploadFile from './UploadFile'
export default {
  name: 'SubmitForm',
  components: {
    UploadFile,
  },
  props: {
    cancelText: {
      type: String,
      default: '取消'
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    labelPosition: {
      type: String,
      default: 'top'
    },
    formStyle: {
      type: Object,
      default: () => ({
      })
    },
    footer: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    formList: {
      type: Array,
      default: () => []
    },
    ruleForm: {
      type: Object,
      default: () => {}
    },
    rules: {
      type: Object,
      default: () => {}
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      submitFormRef: ''
    }
  },
  created() {
    this.submitFormRef = 'submitFormRef' + uuidv4()
  },
  methods: {
    onSave() {
      this.$refs[this.submitFormRef].validate(valid => {
        if (valid) {
          this.$emit('save', this.ruleForm)
        } else {
          this.$emit('error')
        }
      })
    },
    onClose() {
      this.$emit('close')
    },
    defaultChange(key, val) {
      this.$emit('change', { key, val })
    },
    formatDisabled(disabled) {
      if (typeof disabled === 'function') {
        return disabled()
      } else {
        return disabled
      }
    }
  }
}
</script>

<style lang="scss">
.submit-form {
    .el-form-item__content {
       .el-select {
           width: 100%;
       }
    }
  .el-form-item {
    margin-bottom: 4px !important;
  }
  .el-form-item__label {
    color: #000000 !important;
    padding-bottom: 0 !important;
  }
}
</style>
